<template>
  <el-select v-model="selectedKeys" :clearable="clearable" :disabled="disabled" :filterable="filterable"
         :multiple="multiple" :placeholder="placeholder" :size="size" @change="selectedChange">
    <el-option v-for="item in nodeData" :key="item[optionProps.key]" :label="item[optionProps.label]" :value="item[optionProps.value]"></el-option>
  </el-select>
</template>

<script>
  export default {
    name: "option-select",
    model:{
      prop: 'defaultKeys',//prop:将父组件中v-model绑定的数据赋值给defaultKeys(注意defaultKeys只能为props中的key)
      event:'selected' //event:使用this.$emit('selected')将数据返回给父组件
    },
    props:{
      size: { type: String, default() { return '' } },
      clearable: {type: Boolean, default: true},
      multiple: {type: Boolean, default: false},
      disabled: { type: Boolean, default() { return false; } },
      optionProps: { type: Object, default () { return {key:'key',value: 'id',label: 'label'} } },
      optionData:{ type: Array, default () {  return []}  },
      defaultKeys: { type: null, default () {  return null}  },
      filterable:{type:Boolean,default(){return false}},
      placeholder:{ type: String, default() { return '--请选择--' } },
    },
    data () {
      return {
        popoverShow: false, // 是否显示树状选择器
        selectedKeys: [],// select中选中的主键
        selectedData: [], // select中选中的数据
        nodeData:[]
      }
    },
    created(){
      this.nodeData=this.optionData
      this.selectedKeys=this.defaultKeys
    },
    methods:{
      selectedChange() {
        this.$emit('selected',this.selectedKeys);
        this.$emit('change',this.selectedKeys,this.selectedData);
      },
      defaultCheck() {
        if (this.multiple) { //是多选
          this.selectedKeys.push(this.defaultKeys)
        } else {
          this.selectedKeys = this.defaultKeys
        }
      },
    },
    watch:{
      defaultKeys(){
        if(!this.$utils.lodash.isEqual(this.defaultKeys,this.selectedKeys)){
          this.selectedKeys=this.defaultKeys
        }
      },
      optionData(){
        this.nodeData=this.optionData
      }
    }

  }
</script>

<style scoped>

</style>